<script setup>
import { watch, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const activeMenu = ref('');

// 监听route.query.category的变化,实时更新activeMenu的值
watch(() => route.query.category, (val) => {
    activeMenu.value = val;
});

function handleSelect(index) {
    router.push({ path: '/', query: { category: index } });
}
</script>

<template>
    <div class="menu">
        <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect">
            <el-menu-item index="frontend">前端</el-menu-item>
            <el-menu-item index="java">Java</el-menu-item>
            <el-menu-item index="python">Python</el-menu-item>
            <el-menu-item index="mini-program">小程序</el-menu-item>
        </el-menu>
    </div>
</template>
  
<style scoped>
.menu {
    margin-bottom: 20px;
}
</style>